<template>
  <div class="other-panel">
    <div class="qq-links">
      <div class="qq-item" v-for="(link, index) in qqLinks" :key="index">
        <a :href="`tencent://message/?uin=${link.uin}&amp;Site=11&amp;Menu=yes`" target="blank">
          <img src="../../../assets/qq.jpg" style="vertical-align: middle">QQ客服{{index + 1}}
        </a>
      </div>
    </div>
    <div class="phones">
      <div class="title">客服电话</div>
      <div class="item" v-for="(phone, index) in phones" :key="index">{{phone}}</div>
    </div>
    <div class="company-info">
      <div class="name">{{companyInfo.name}}</div>
      <div class="icp">
        <a href="http://www.miitbeian.gov.cn">{{companyInfo.icp}}</a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator'

  @Component({
    components: {}
  })
  export default class OtherPanel extends Vue {
    qqLinks = [
      {uin: '2269799822'},
      {uin: '1318950972'},
      {uin: '1660036122'},
      {uin: '1989225014'},
      {uin: '3508253506'},
      {uin: '2504005570'},
      {uin: '1163622554'},
      {uin: '3116482159'},
    ]
    phones = [
      '021-50120179',
      '50120189',
      '50890789',
    ]
    companyInfo = {
      name: '上海宏申信息科技有限公司',
      icp: '沪ICP备14044508号-4'
    }
  }
</script>

<style lang="scss" scoped>
  .other-panel{
    text-align: center;

    .company-info{
      margin-top: 30px;
      .name{
        color: #58666e;
      }
    }
    .phones{
      margin-top: 20px;
      .title{
        color: #58666e;
        margin-bottom: 10px;
      }
      .item{
        color: #337ab7;
      }
    }
    .qq-links{
      margin-top: 40px;
      .qq-item{
        & + .qq-item{
          margin-top: 2px;
        }
      }
    }
    a{
      color: #337ab7;
      text-decoration: none;
    }
  }
</style>
